import React from 'react';
//import graphql from 'babel-plugin-relay/macro';
import {PreloadedQuery, usePreloadedQuery} from 'react-relay/hooks';

import ReactMarkdown from 'react-markdown';
import SuspenseImage from '../SuspenseImage';
import IssueDetailComments from './IssueDetailComments';
import IssueActions from './IssueActions';
import * as IssueDetailRootQuery from "./__generated__/IssueDetailRootQuery.graphql";

const graphql = require("babel-plugin-relay/macro");

//注意底下issueDetailQuery名字 要和上一级组件或路由器内的定义保证一样的。
//都要改的 PreloadedQuery<IssueDetailRootQuery.IssueDetailRootQuery> 类型也要改，import也该改。
interface Props {
  prepared: {
    issueDetailQuery: PreloadedQuery<IssueDetailRootQuery.IssueDetailRootQuery>;
  }
}

/**
 * The root component for the issue detail route.
 * 这下面query IssueDetailRootQuery( 是一个关键标识：relay编译器依照这个名字生成文件的。
 * 路由器直接进来的。路由的prepare步骤实际是：loadQuery 直接加载graphql接口到后端获取数据query IssueDetailRootQuery。
 */
export default function IssueDetailRoot(props: Props) {
  // Defines *what* data the component needs via a query. The responsibility of
  // actually fetching this data belongs to the route definition: it calls
  // preloadQuery() with the query and variables, and the result is passed
  // on props.prepared.issueDetailQuery - see src/routes.ts
  const { node: issue } = usePreloadedQuery(
    graphql`
      query IssueDetailRootQuery($id: ID!) {
        node(id: $id) {
          ... on Issue {
            title
            number
            author {
              login
              avatarUrl
            }
            body
            closed
            url
            ...IssueDetailComments_issue
            ...IssueActions_issue
          }
        }
      }
    `,
    props.prepared.issueDetailQuery,
  );
  //上面旧的 props.prepared.issueDetailQuery,

  if (issue == null) {
    return  <div className="issue-title">
            <a
                className="issue-title-github-link"
                title="Issue on GitHub"
            >
              Issue not found
            </a>
          </div>;
      //return 'Issue not found';
  }
  //ReactMarkdown？renderers？image直接当做image类型节点= 反射成React。
  //图片类型image这个标签，才允许的。相当于给ReactMarkdown搞个定制函数。

  return (
    <div className="issue">
      <div className="issue-title">
        #{issue.number} - {issue.title} - {issue.closed ? 'Closed' : 'Open'}
        <a
          className="issue-title-github-link"
          href={issue.url as any}
          title="Issue on GitHub"
        >
          View on GitHub
        </a>
      </div>
      <div className="issue-comment">
        <SuspenseImage
          className="issue-comment-author-image"
          title={`${issue.author?.login}'s avatar`}
          src={issue.author?.avatarUrl}
        />
        <div className="issue-comment-author-name">{issue.author?.login}</div>
        <div className="issue-comment-body">
          <ReactMarkdown
            source={issue.body as string}
            renderers={{ image: SuspenseImage }}
          />
        </div>
      </div>

      <IssueDetailComments issue={issue} />
      <IssueActions issue={issue} />

    </div>
  );

}
